<template>
	<view class="card">
		<view class="body">
			<view class="group">
				<view class="start">
					<view class="thumb" >
						  <image style="width: 50px;height: 50px;":src="item.imageUrl" />
					</view>
					<view class="student-info">
						<view class="name">{{ item.name }}</view>
						<view class="mobile">{{ item.mobile }}</view>
						<view class="expireDate">vip到期时间： {{ item.expireDate }}</view>
					</view>
				</view>
				<view class="end">
					<view class="renew">
						 <button class="renew-btn" @click="renew">续费</button>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="removeBind" @click="removeBind">解除绑定</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { mineServer, homeServer } from "@/common/index";
	import { urlHelp } from '@/utils/index';
	import { useStudentListStore } from "@/stores/useStudentList.js"
	const studentStore = useStudentListStore();
	interface CardProps {
		item: {
			name: string
			nickName: string
			username: string
			imageUrl: string
			mobile: string
			expireDate: string
			id: string
			[key: string]:any
		}
	}
	
	const props = defineProps<CardProps>();
	const emits = defineEmits(['queryPage'])
	
	
	//获取学生信息
	const studentList = async () => {
		try{
			const {data, status} = await homeServer.studentList()
			if(status === "200"){
				const sts = data?.map(item => urlHelp.imgAddPrefix(item, 'imageUrl')) || [];
				studentStore.setStudents(sts || []);
				const curStd = sts.find(s => s.id === studentStore.currentStudent?.id);
				studentStore.onselectStudent(curStd || {});
				if(data?.length === 0 || !Array.isArray(data)){
					studentStore.setStudents([]);
				}
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	
	const unBind = async () => {
		 const studentId = props?.item?.id;
		 if(studentId){
			 const { status, data} = await mineServer.unBind({studentId});
			 if(status === '200'){
				 uni.showToast({
				 	icon:"success",
					title:"解绑成功",
					success() {
						studentList()
						emits('queryPage')
					}
				 })
			 } else {
				 uni.showToast({
				 	title:'请求失败',
					icon:"fail"
				 })
			 }
		 } else {
			 console.log('没有学生id')
		 }
	}
	
	
	const removeBind = () => {
		uni.showModal({
			content:"您确定解除绑定吗",
				cancelText:"取消",
				confirmText:"确定",
				success({confirm}) {
					if(confirm){
						unBind()
					}
				}
		})
	}
	

	
	const renew = () => {
		 const studentId = props?.item?.id;
		 if(studentId){
			 uni.navigateTo({
			 	url:`/pagesB/memberCenter/index?studentId=${studentId}`
			 })
		 }
	}
</script>

<style scoped lang="scss">
	.card{
		background-color: #fff;
		margin-bottom: 30upx;
		.body{
			padding: 30upx;
			.group{
				display: flex;
				justify-content: space-between;
				align-items: start;
				.start{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.thumb{}
					.student-info{
						margin-left: 20upx;
						.name{
							font-size: 30upx;
							color: #080808;
						}
						.mobile{
							font-size: 30upx;
							color: #000000;
							margin: 5upx 0;
						}
						.expireDate{
							color: #868686;
							font-size: 25upx;
						}
					}
				}
				.end{
					.renew{
						.renew-btn{
							color: #fff;
							width: 150upx;
							height: 60upx;
							line-height: 60upx;
							text-align: center;
							border-radius: 60upx;
							border:none;
							background-color: #0be0a7;
							font-size: 24upx;
						}
					}
				}
			}
		}
		.footer{
			height: 80upx;
			border-top: 1upx solid #dedede;
			display: flex;
			justify-content: center;
			align-items: center;
			.removeBind{
				color: #c0747a;
				font-size: 30upx;
			}
		}
		
	}
</style>